<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" @click="queryit(0)">分散式</el-menu-item>
      <el-menu-item index="2" @click="queryit(1)">集中式</el-menu-item>
    </el-menu>
    <!--    <el-button type="primary" plain>分散式</el-button>-->
    <!--    <el-button type="primary" @click="queryit(1)" plain>集中式</el-button>-->

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-cascader
          placeholder="请选择省、市、县"
          v-model="address"
          :options="options"
          :props="props"
          @change="queryadd"
          clearable></el-cascader>
        <el-form-item label="  ">
          <el-input v-model="queryForm.fuzzy1" style="width: 250px" @blur="queryFuzzy"
                    placeholder="搜索：小区名，公寓名" clearable>
            <template slot="prepend"><i class="el-icon-search"></i></template>
          </el-input>
          <el-input v-model="queryForm.fuzzy2" style="width: 250px" @blur="queryFuzzy"
                    placeholder="搜索：房间号，租客名" clearable>
            <template slot="prepend"><i class="el-icon-search"></i></template>
          </el-input>
        </el-form-item>
        <!--  <el-form-item label="  ">
                  <el-input v-model="queryForm.fuzzy2" style="width: 250px" @blur="queryFuzzy"
                            placeholder="搜索：房间号，租客名" clearable>
                    <template slot="prepend"><i class="el-icon-search"></i></template>
                  </el-input>
           </el-form-item>-->
      </el-form-item>
    </el-form>
    <div>
      <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="0" @click="kindquery('')">全部</el-menu-item>
        <el-menu-item index="9" @click="myord">最新发布</el-menu-item>
        <el-menu-item index="1" @click="kindquery('fq')">租房分期</el-menu-item>
        <el-menu-item index="2" @click="kindquery('bl')">租约保理</el-menu-item>
        <el-menu-item index="3" @click="kindquery('status')">空置可租</el-menu-item>
        <el-menu-item index="4" @click="kindquery('qftx')">欠费提醒</el-menu-item>
        <el-menu-item index="5" @click="kindquery('sftx')">收费提醒</el-menu-item>
        <el-menu-item index="6" @click="kindquery('kdq')">合同快到期</el-menu-item>
        <el-menu-item index="7" @click="kindquery('ydq')">合同已到期</el-menu-item>
        <el-menu-item index="8" @click="kindquery('zxwh')">装修维护</el-menu-item>
      </el-menu>
    </div>
    <div>
      <el-card shadow="always" v-for="item in tableData">
        <el-card shadow="always">
          <el-descriptions title="房间信息" :column=4>
            <el-descriptions-item><h2>{{ item.preName }}-{{ item.flatName }}</h2></el-descriptions-item>
            <el-descriptions-item label="单元">{{ item.buildingNo }}栋{{ item.unitNo }}单元</el-descriptions-item>
            <el-descriptions-item label="出租类型"> {{
                item.leaseType == 0 ? '整租' : item.leaseType == 1 ? '分租' : '集中式'
              }}
            </el-descriptions-item>
            <el-descriptions-item label="状态">{{ item.publishStatus == 0 ? '已发布' : '待发布' }}
            </el-descriptions-item>
            <el-descriptions-item label="数量"> 房间数：{{ item.count }} 套</el-descriptions-item>
            <el-descriptions-item>
              <el-button
                size="mini"
                type="warning"
                @click="handleEdit(item)">编辑
              </el-button>
              <span v-if="item.publishStatus == 1">
              <el-button type="primary" plain size="mini" @click="upStatus(item.id,1,'发布')">发布</el-button>
              </span>
              <span v-if="item.publishStatus == 0">
              <el-button type="primary" plain size="mini" @click="upStatus(item.id,0,'取消发布')">取消发布</el-button>
              </span>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete( item.id)">删除
              </el-button>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card style="width:150px">
          <i class="el-icon-star-on">
            <font color="#ff4500">最新发布</font>
          </i>
        </el-card>
        <el-card shadow="hover"
                 v-for="(room,index) in item.roomInfoList"
                 :body-style="{padding:0}"
                 style="width: 170px;height: 210px;margin-top: 20px;float: left;margin-left: 13px">

          <el-popover
            placement="right"
            width="600"
            trigger="click">

            <el-divider content-position="center"><i class="el-icon-s-home"></i> 房间号：{{ room.roomCode }}</el-divider>
            <el-descriptions title="信息" :column=2 :border=true>
              <el-descriptions-item label="金融服务">
                <i class="el-icon-money"></i>
                金融产品：-<br>
                合同号：-<br>
                申请时间：-<br>
                总金额（授信后）：0元
              </el-descriptions-item>
              <el-descriptions-item label="操作">
                <el-button type="text" @click="toBanking">金融服务</el-button>
              </el-descriptions-item>

              <el-descriptions-item label="房源详情">
                <i class="el-icon-edit"></i>
                房源详情：{{ item.buildingNo }} 栋 {{ item.unitNo }} 单元 {{ item.roomNo }}<br>
                户型：
                {{ item.hall }}
                {{ item.room }}<br>
                面积：{{ room.proportion }}平方米<br>
                标价：
                <el-input
                  style="width: 88px"
                  size="mini"
                  placeholder="请输入内容"
                  v-model="room.rental"
                  id="dk"
                  ref="dk"
                  :disabled="bjflag"
                  @blur="upRental(room.id,room.rental)">
                </el-input>
                元
                <el-button size="mini" type="warning" icon="el-icon-edit"
                           @click="toUpRental"></el-button>
                <br>
                付款方式：押{{ item.paymentMortgage }}付{{ item.paymentPay }}元
              </el-descriptions-item>
              <el-descriptions-item label="操作">
<!--                <el-button type="text">编辑</el-button>-->
              </el-descriptions-item>

              <!--  空置可租  -->
              <el-descriptions-item label="房源状态" v-if="room.status=='0'">
                <i class="el-icon-turn-off"></i>
                状态：{{ item.decorate == 0 ? '空置' : '装修' }}<br>
              </el-descriptions-item>
              <el-descriptions-item label="操作" v-if="room.status=='0'">
                <el-button type="text" v-if="item.decorate==0" @click="fitment(item.id,1)">改为装修</el-button>
                <el-button type="text" v-if="item.decorate==1" @click="fitment(item.id,0)">改为空置</el-button>
              </el-descriptions-item>

              <el-descriptions-item label="租约信息" v-if="room.status=='0'">
                <i class="el-icon-thumb"></i>
                <el-tag
                  type="success">
                  状态：空置{{ room.freeTime }}天
                </el-tag>
                <br>
              </el-descriptions-item>
              <el-descriptions-item label="操作" v-if="room.status=='0'">
<!--                <el-button type="text">合同录入</el-button>-->
              </el-descriptions-item>

              <!--  已租  -->
              <el-descriptions-item label="租约信息" v-if="room.status=='1'">
                <i class="el-icon-turn-off"></i>
                合同编号：{{ room.contractNo }}<br>
                租客电话：{{ room.tenantPhone }}<br>
                租约时间：{{ room.startDate }}至{{ room.endDate }}<br>
                付款方式：押{{ room.depositType }}付{{ room.paymentType }}<br>
              </el-descriptions-item>
              <el-descriptions-item label="操作" v-if="room.status=='1'">
              </el-descriptions-item>

              <el-descriptions-item label="账务信息" v-if="room.status=='1'">
                <i class="el-icon-thumb"></i>
                租金欠款：元<br>
                其他欠款：元<br>
                租金下期付款：<br>
              </el-descriptions-item>
              <el-descriptions-item label="操作" v-if="room.status=='1'">
<!--                <el-button type="text">账单列表</el-button>-->
                <br>
                <el-button type="text" @click="toAddBill(room.contractId)">添加账单</el-button>
              </el-descriptions-item>

            </el-descriptions>

            <div @click="getRoomDetails" slot="reference">
              <el-container>
                <el-header :class="room.status=='1'?'orange':'blue'"><h3>{{ room.roomCode }}</h3>
                  {{ room.rentfq == 1 ? '租房分期' : '' }}
                  {{ room.zybl == 1 ? '租约保理' : '' }}
                </el-header>
                <el-main>

                  <div v-if="room.status=='1'">
                    <el-tag size="medium"
                            :disable-transitions="true">
                      {{ room.rtenantName }}
                    </el-tag>
                  </div>
                  <div v-else>
                    <el-tag
                      type="success" effect="dark" :disable-transitions="true">
                      空置{{ room.freeTime }}天
                    </el-tag>

                  </div>
                </el-main>
                <el-footer :class="room.status=='1'?'orange':'blue'">
                  <i class="el-icon-house"></i>
                  {{ room.rental }}元/月
                </el-footer>
              </el-container>
            </div>

          </el-popover>
        </el-card>
        <div style="clear: both"></div>
        <el-divider><i class="el-icon-house"></i></el-divider>
      </el-card>

    </div>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.pageNum"
        :page-sizes="[1,3,5,10, 20, 50, 100]"
        :page-size="queryForm.pageSize"
        :page-count="pages"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import {
  apiUpdateHouse,
  apiUpdateRental,
  deleteById,
  getRegionList,
  getRoomRackList,
  updatePublishStatus
} from "@/api/housing/roomRack/roomRack";

export default {
  name: "index",
  data() {
    return {
      bjflag: true,
      activeIndex: '1',
      activeIndex2: '0',
      options: [{}],
      activeName: 'first',
      queryForm: {
        provinceId: undefined,
        cityId: undefined,
        countyId: undefined,
        pageNum: 1,
        pageSize: 3,
        fuzzy: '',
        fuzzy1: '',
        fuzzy2: '',
        type: 0,
        kind: '',
        ord: undefined,
      },
      address: ['', '', ''],
      props: {
        checkStrictly: true,
        label: 'name',
        value: 'id',
      },
      tableData: [],
      total: 0,
      pages: 0,

    };
  },
  methods: {
    toAddBill(val) {
      console.log(val);
      this.$router.push('/finance/addpayplan?id=' + val);
    },
    getRoomDetails() {
      console.log("来了")
    },
    upStatus(id, st, msg) {
      console.log(id);
      this.$confirm('确认' + msg + '该房源吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(msg)
        let statusData = {
          id: id,
          publishStatus: st
        };
        updatePublishStatus(statusData).then(res => {
          console.log('发布状态', res);
          if (res.flag) {
            this.$message({
              type: 'success',
              message: msg + '成功!'
            });
            this.queryForm.pageNum = 1;
            this.roomRackList();
          } else {
            this.$message.error(msg + "失败！");
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    handleEdit(row) {
      console.log('编辑',row)
      if (row.type == 0) {
        //分散式房源
        console.log("分散式房源");
        //获取houseId 和 premisesName
        console.log(row);
        //带着数据跳转到分散式房源页面
        this.$router.push({
          path: "/housing/distributed",
          query: {
            houseId: row.id,
            premisesName: row.preName,
            rowInfo: JSON.stringify(row),
          }
        })
      } else {
        //集中式房源
        console.log("集中式房源")
        this.$router.push({
          path: '/housing/centralization',
          query: {
            rowInfo: JSON.stringify(row)
          }
        })
      }
    },
    handleDelete(row) {
      console.log(row);
      this.$confirm('确认删除该房源吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById(row).then(res => {
          console.log('删除', res);
          if (res.flag) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.queryForm.pageNum = 1;
            this.roomRackList();
          } else {
            this.$message.error("删除失败！");
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    myord() {
      this.queryForm.ord = 'new'
      this.queryForm.pageNum = 1;
      this.roomRackList();
    },
    kindquery(val) {
      this.queryForm.ord = '';
      this.queryForm.kind = val;
      this.queryForm.pageNum = 1;
      this.roomRackList();
    },
    queryFuzzy() {
      this.queryForm.pageNum = 1;
      this.roomRackList();
    },
    queryadd() {
      console.log(this.address)
      console.log(this.queryForm)
      this.queryForm.pageNum = 1;
      this.queryForm.provinceId = this.address[0];
      this.queryForm.cityId = this.address[1];
      this.queryForm.countyId = this.address[2];
      this.roomRackList();
    },
    toUpRental() {
      this.bjflag = false;
    },
    toBanking() {
      this.$router.push("/banking/introduction")
    },
    upRental(id, money) {
      let rom = {
        id: id,
        rental: money,
      };
      console.log(rom);
      apiUpdateRental(rom).then(res => {
        if (res.flag) {
          this.$message.success("修改成功");
          this.bjflag = true;
        } else {
          this.$message.success("修改失败");
        }
      })
    },
    queryit(val) {
      this.queryForm.pageNum = 1;
      this.queryForm.type = val;
      console.log(this.queryForm.type);
      this.roomRackList();
    },
    regionList() {
      getRegionList().then(res => {
        console.log(res);
        let msgData = res.msgData;
        this.options = msgData;

      })
    },
    fitment(id, val) {
      console.log(id, val);
      let formData = {
        id: id,
        decorate: val,
      }
      this.$confirm('确认修改该房源的装修状态吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiUpdateHouse(formData).then(res => {
          console.log('删除', res);
          if (res.flag) {
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.queryForm.pageNum = 1;
            this.roomRackList();
          } else {
            this.$message.error("修改失败！");
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    roomRackList() {
      getRoomRackList(this.queryForm).then(res => {
        console.log(res);
        let msgData = res.msgData;
        console.log(msgData);
        this.tableData = msgData.list;
        this.total = msgData.total;
        this.pages = msgData.pages;
        console.log(this.tableData.length)
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryForm.pageSize = val;
      this.queryForm.pageNum = 1;
      this.roomRackList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryForm.pageNum = val;
      this.roomRackList();
    }
  }, created() {
    this.roomRackList();
    this.regionList();

  }
}
</script>

<style scoped>
.my-label {
  background: #eeeeee;
}

.el-header, .el-footer {
  /*background-color: #B3C0D1;*/
  /*color: #333;*/
  text-align: center;
  height: 52px;
  line-height: 52px;
}

.el-main {
  /*background-color: #E9EEF3;*/
  /*color: #333;*/
  text-align: center;
  height: 88px;
  line-height: 88px;
}

.blue {
  color: #11b4ff;
  background-color: cyan;
}

.orange {
  color: #ff9d4a;
  background-color: lightgoldenrodyellow;
}
</style>
